<template>
	<view class="">
		<view class="topHint textCenter">上传文件>设置加密方式>分享链接</view>
		<view class="upload flexColumn">
			<!-- <uni-file-picker style="width: auto;margin: 100rpx 0;" limit="5" v-model="imageValue" mode="grid"
				@delete="deleteFile" @select="chooseFile" @progress="onprogress" file-mediatype="file"
				title=""></uni-file-picker> -->
			<view class="chooseFileBtn" @click="chooseFile">选择文件</view>
			<view class="mb-40" v-for="item,index in file" :key="index">
				<view class="flex flexSbetween">
					<view class="font28">{{item.name}}</view>
					<u-icon class="ml-60" name="close-circle-fill" color="#777" size="20"
						@click="deleteFile(index)"></u-icon>
				</view>
				<progress style="width: 500rpx;" :percent="item.percent" activeColor="#FF7B6D" backgroundColor="#DDDDDD"
					show-info stroke-width="8" />
			</view>

			<!-- <view class="" v-if="finish">
				<progress style="width: 500rpx;" :percent="percent" activeColor="#FF7B6D" backgroundColor="#DDDDDD"
					show-info stroke-width="8" />
			</view> -->
		</view>
		<view class="topic">
			<image src="../../static/index/fengeL.png"></image>
			<view class="topicText">加密设置</view>
			<image src="../../static/index/fengeR.png"></image>
		</view>
		<view class="flex flexSbetween set">
			<view class="box">
				<view class="title">打开次数</view>
				<view class="input">
					<input placeholder="输入单位次数" v-model="openNum" type="number" />
				</view>
			</view>
			<view class="box">
				<view class="title">单次访问时长</view>
				<view class="input">
					<input placeholder="输入单位秒" v-model="visitTime" type="number" />
				</view>
			</view>

		</view>
		<view class="flex flexSbetween set">
			<view class="box">
				<view class="title">访问人数限制</view>
				<view class="input">
					<input placeholder="输入单位人" v-model="visitNum" type="number" />
				</view>
			</view>
			<view class="box">
				<view class="title">访问码</view>
				<radio-group class="flex mt-20">
					<label class="flex mr-20" v-for="(item, index) in items" :key="index" @click="radioChange(index)">
						<radio color="#FF0000" :checked="index === current" />
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="set" v-if="current == 0">
			<view class="">
				<view class="title">访问码</view>
				<view class="input">
					<input placeholder="输入访问码" v-model="visitCode" type="number" />
				</view>
			</view>
		</view>
		<view class="set">
			<view class="title">有效期</view>
			<radio-group class="flex mt-20">
				<label class="flex mr-20" v-for="(item, index) in periodValidity" :key="index"
					@click="radioChangeTwo(index)">
					<radio color="#FF0000" :checked="index === periodValidityCurrent" />
					<view style="font-size: 28rpx;">{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view class="set" v-if="periodValidityCurrent == 1">
			<view class="title">指定日期</view>
			<view class="input flex flexSbetween">
				<view @click="chooseDate">{{date}}</view>
				<u-calendar color="#FE0000" :show="show" closeOnClickOverlay @close="close" mode="range"
					@confirm="confirm" showLunar monthNum="4"></u-calendar>
				<u-icon name="calendar" color="#999" size="28"></u-icon>
			</view>
		</view>
		<view class="encryption flex flexJusCenter" @click="encryptionFinfish">立即加密</view>
		<view class="encryptionContent">
			<view class="topic">
				<image src="../../static/index/fengeL.png"></image>
				<view class="topicText">加密设置</view>
				<image src="../../static/index/fengeR.png"></image>
			</view>
			<view class="encryptionList">
				<view class="lockList" v-for="item,index in encryption" :key="index">
					<view class="tags">{{index + 1}}.</view>
					<view class="lockText">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseUrl from '@/config/url.js';
	import PDFJS from '@/node_modules/pdfjs-dist';
	import pdfjsWorker from '@/node_modules/pdfjs-dist/build/pdf.worker.entry'
	export default {
		data() {
			return {
				percent: 0,
				file: [],
				items: [{
						name: '有'
					},
					{
						name: '无'
					}
				],
				current: 1,
				periodValidity: [{
						name: '永久'
					},
					{
						name: '自定义'
					}
				],
				periodValidityCurrent: 0,
				date: '请选择日期',
				encryption: [],
				openNum: 0,
				visitTime: 0,
				visitNum: 0,
				visitCode: '',
				fileList: [],
				show: false,
				validityDate: [],
				userInfo: '',
				uploadTask: null,
				finish: true,
				imageValue: [],
				uploadCount: 1,
				checkInfo:''
			}
		},
		onShow() {
			this.init()
			this.getEncryptionContent()
			this.getUserInfo()
			this.getcheck()
		},
		methods: {
			getcheck(){
				let data={
					equityId:'10007'
				}
				this.api.get('api/equity/check',data).then(res=>{
					if(res.code == 200){
						this.checkInfo = res.data
					}
				})
			},
			init() {
				this.openNum = ''
				this.visitTime = ''
				this.visitNum = ''
				this.visitCode = ''
				this.validityDate = []
				this.current = 1
			},
			getUserInfo() {
				let data = {}
				this.api.get('api/user/information', data).then((res) => {
					if (res.code == 200) {
						this.userInfo = res.data
						this.uploadCount = res.data.identity == 0 ? 1 : 9
					}
				})
			},
			close() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				var arr = []
				arr.push(e[0])
				arr.push(e[e.length - 1])
				this.validityDate = arr
				console.log(this.validityDate)
				this.date = e[0] + '~' + e[e.length - 1]
			},
			chooseDate() {
				this.show = true
			},
			deleteFile(e) {
				this.file.splice(e, 1)
				this.fileList.splice(e, 1)
			},
			// 访问码
			radioChange(e) {
				this.current = e
			},
			//有效期
			radioChangeTwo(e) {
				this.periodValidityCurrent = e
			},
			getEncryptionContent() {
				let data = {}
				this.api.get('api/content/infomation', data).then(res => {
					if (res.code == 200) {
						this.encryption = res.data.encryption_method

					}
				})
			},

			// 选择文件
			chooseFile(e) {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 500)
					return
				}
				uni.chooseFile({
					count: this.uploadCount,
					extension: ['.pdf'],
					success: res => {
						console.log(res)
						let fileSize = res.tempFiles[0].size / 1024 / 1024
						if(this.userInfo.identity == 0){
							if(fileSize > 1){
								uni.showToast({
									title:'文件大小不能超过'+this.checkInfo.limit+'M',
									icon:'none'
								})
								return
							}
						}
						uni.showLoading({
							title: '正在上传...'
						})
						var lists = [].concat(res.tempFiles)
						lists.map((item) => {
							this.imageValue.push({
								url: item.path,
								extname: item.type,
								name: item.name
							})
						})
						console.log(lists)
						for (let i = 0; i < lists.length; i++) {
							this.uploadFile(lists[i].path)
						}
					},
					fail: err => {
						uni.hideLoading()
					}
				})

			},
			uploadFile(url) {
				console.log(url)
				uni.uploadFile({
					url: baseUrl + 'api/common/upload', //仅为示例，并非真实接口地址。
					filePath: url,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					formData: {
						'category': 'pdf'
					},
					success: (suc) => {

						let data = JSON.parse(suc.data)
						// this.getNum(data.data.fullurl)
						if (data.code == 200 || data.code == 1) {
							uni.hideLoading()
							this.file.push({
								name: data.data.filename,
								percent: 0
							})
							this.fileList.push(data.data.url + '|' + data.data.fullurl)
							if (this.userInfo.identity == 0) {
								for (let i = 0; i < this.file.length; i++) {
									var time = setInterval(() => {
										if (this.file[i].percent < 100) {
											this.file[i].percent++
										} else {
											clearInterval(time)
										}
									}, 200)
								}
							} else {
								for (let i = 0; i < this.file.length; i++) {
									console.log(this.file)
									var time = setInterval(() => {
										if(this.file[i].percent < 100){
											this.file[i].percent ++
										}else{
											clearInterval(time)
										}
									}, 20)
								}
							}
						} else {
							uni.hideLoading()
							uni.showToast({
								title: data.msg,
								icon: 'none'
							})
						}
					},
					fail: err => {
						uni.hideLoading()
					}
				});
			},
			getNum(path) {

				const pdfPath = path
				PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker
				PDFJS.getDocument(pdfPath).then(function(doc) {
					var numPages = doc.numPages;
					console.log('# Document Loaded');
					console.log('Number of Pages: ' + numPages);
				})
			},
			cancel() {
				this.fileList = []
				this.imageValue = []
				this.percent = 0
			},
			encryptionFinfish() {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 500)
					return
				}
				if (this.file.length == 0) {
					uni.showToast({
						title: '请先选择文件',
						icon: 'none'
					})
					return
				}
				// if(!this.openNum){
				// 	uni.showToast({
				// 		title:'请输入打开次数',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				// if(!this.visitTime){
				// 	uni.showToast({
				// 		title:'请输入单位时长',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				// if(!this.visitNum){
				// 	uni.showToast({
				// 		title:'请输入访问人数',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				let data = {
					files: this.fileList.join(','),
					openNum: this.openNum == '' ? 0 : this.openNum,
					accessTime: this.visitTime == '' ? 0 : this.visitTime,
					accessNum: this.visitNum == '' ? 0 : this.visitNum,
					hasAccess: this.current == 0 ? 1 : 0,
					accessCode: this.visitCode,
					validityDate: this.validityDate.join(','),
				}
				console.log(data)
				this.api.post('api/file/create', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						let data = JSON.stringify(res.data)
						uni.navigateTo({
							url: '/pages/lock/encryptionFinfish?data=' + data
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			}
		}
	}
</script>

<style>
	.topHint {
		font-size: 28rpx;
	}

	.upload {
		margin: 20rpx;
		border: 1rpx solid #FE0000;
		border-radius: 10rpx;
		padding: 30rpx;
	}

	.chooseFileBtn {
		background: #FF5347;
		color: #fff;
		border-radius: 8rpx;
		padding: 15rpx 50rpx;
		font-size: 30rpx;
		margin: 40rpx 0;
	}

	.cancel {
		background: #FF5347;
		color: #fff;
		border-radius: 8rpx;
		padding: 15rpx 50rpx;
		font-size: 30rpx;
		margin: 40rpx 200rpx 0;
	}

	.topic {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0;
	}

	.topic image {
		width: 92rpx;
		height: 11rpx;
	}

	.topicText {
		font-size: 36rpx;
		color: #333;
		font-weight: 700;
		margin: 0 20rpx;
	}

	.set {
		margin: 40rpx 20rpx;
	}

	.box {
		width: 45%;
	}

	.title {
		font-size: 30rpx;
		color: #2C2C2C;
	}

	.input {
		border: 1rpx solid #616161;
		border-radius: 10rpx;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
	}

	radio {
		transform: scale(0.7);
	}

	.encryption {
		background: #FE0000;
		color: #fff;
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		margin: 40rpx 200rpx;
	}

	.encryptionContent {
		background: #F7F7F7;
		padding: 30rpx;
	}

	.tags {
		color: #423F3F;
		font-size: 26rpx;
		margin-right: 20rpx;
	}

	.lockList {
		display: flex;
		font-size: 26rpx;
		color: #423F3F;
		margin: 30rpx 0;
	}

	.lockText {
		width: 650rpx;
	}
</style>